<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
</head>
<link rel="stylesheet" href="../../style/login.css">

<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>

<body>
<div class="login" id="app" style="height:695px ;">

    <div class="login-box">

        <img src="../../images/login/a.jpeg" alt="">
        <div class="login-form">

            <el-form ref="loginForm" :model="loginForm" :rules="loginRules">

                <div >
                    <el-form-item prop="userName">
                        <el-input v-model="loginForm.userName" type="text" auto-complete="off" placeholder="用户名"
                                  maxlength="20" prefix-icon="el-icon-user" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" type="password" placeholder="密码"
                                  prefix-icon="el-icon-lock" maxlength="20" />
                    </el-form-item>
                    <el-form-item prop="code">
                        <div >
                            <el-input
                                    prefix-icon="el-icon-success"
                                    v-model="loginForm.code"
                                    auto-complete="off"
                                    placeholder="验证码">
                            </el-input>

                        </div>
                    </el-form-item>
                    <div >
                        <el-image
                                @click="getCode"
                                :src="codeUrl"
                        ></el-image>
                    </div>
                    <el-button type="text" @click="changePasswordVisble = true">忘记密码？</el-button>
                </div>

                <el-button type="primary" @click="login()" style="margin-left: 20px; margin-top: 10px;">登 录</el-button>
                <el-button @click="registerFormVisible = true" style="margin-left: 40px;">注 册</el-button><br>

            </el-form>
        </div>
    </div>
    <el-dialog title="注册" :visible.sync="registerFormVisible" width="35%">
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules">

            <div style="width: 350px;margin: 0 auto;padding: 0;">
                <el-form-item prop="userName">
                    <el-input v-model="registerForm.userName" type="text" auto-complete="off" placeholder="用户名"
                              maxlength="20" prefix-icon="el-icon-user" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="registerForm.password" type="password" placeholder="密码"
                              prefix-icon="el-icon-lock" maxlength="20" />
                </el-form-item>
                <el-form-item prop="currentPassword">
                    <el-input v-model="registerForm.currentPassword" type="password" placeholder="确认密码"
                              prefix-icon="el-icon-lock" maxlength="20"  />
                </el-form-item>
                <el-form-item prop="email" :rules="[
                        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                      ]" >
                    <el-input v-model="registerForm.email"  placeholder="邮箱"
                              prefix-icon="el-icon-message" maxlength="20"  />
                </el-form-item>
                <el-form-item prop="code">
                    <el-input v-model="registerForm.code"  placeholder="验证码"
                              prefix-icon="el-icon-s-promotion" maxlength="20"  />
                </el-form-item>
                <el-button type="text" @click="registerSendMail()" :disabled="mailDisabled">{{btnName}}</el-button>
            </div>

            <el-row :gutter="20">
                <el-col :span="14" style="margin-left:30%;margin-top: 30px;">
                    <el-form-item style="width:100%;">
                        <el-button type="primary" @click="register()" >注 册</el-button>
                        <el-button @click="registerFormVisible = false" style="margin-left: 50px;">取 消</el-button>

                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="changePasswordVisble" width="40%">

        <el-row v-if="active == 0" style="margin-top: 30px;margin-left: 120px;">
            <el-col :span="12">
                <el-input v-model="changeEmailForm.userName"  placeholder="用户名"
                          prefix-icon="el-icon-user-solid" maxlength="20"  />
                </el-form>

            </el-col>


        </el-row>
        <el-row v-if="active == 1" style="margin-top: 30px;margin-left: 120px;">
            <el-col :span="10">
                <el-input v-model="changeEmailForm.code"  placeholder="验证码"
                          prefix-icon="el-icon-s-promotion" maxlength="20"  />


            </el-col>

            <el-col :span="6" style="margin-left: 20px;">
                <el-button type="text" @click="sendCode2" :disabled="newMailDisabled">{{newBtnName}}</el-button>
            </el-col>

        </el-row>

        <el-row v-if="active == 2" style="margin-top: 30px;margin-left: 120px;">
            <el-col :span="20">

                <el-form :model="changeEmailForm"  ref="emailFrom">
                    <el-form-item label="">
                        <el-input  type="password" placeholder="新密码"
                                   prefix-icon="el-icon-lock" maxlength="20" v-model="changeEmailForm.password"/>
                    </el-form-item>

                    <el-input type="password" placeholder="确认密码"
                              prefix-icon="el-icon-lock" maxlength="20"  v-model="changeEmailForm.currentPassword"/>
                    </el-form-item>
                </el-form>



            </el-col>



        </el-row>

        <el-row>

            <el-col :span="16" style="margin-left: 120px;margin-top: 30px;">
                <el-steps :active="active" finish-status="success">
                    <el-step title="输入用户名"></el-step>
                    <el-step title="输入验证码"></el-step>
                    <el-step title="输入新密码"></el-step>

                </el-steps>
            </el-col>



        </el-row>





        <el-row :gutter="20">
            <el-col :span="14" style="margin-left:20%;margin-top: 30px;">

                <el-button type="primary" @click="next()" >{{nextName}}</el-button>
                <el-button @click="changePasswordVisble = false" style="margin-left: 50px;">取 消</el-button>
            </el-col>
        </el-row>

    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            emailFrom:{
                email: "",
                code:"",
            },
            changeEmailForm:{
                email: "",
                userName: "",
                code:"",
                password:"",
                currentPassword:""
            },
            active :0,
            nextName: "下一步",
            btnName: "获取验证码",
            newBtnName: "获取验证码",
            changePasswordVisble: false,
            mailDisabled: false,
            btnName: "发送邮箱验证码",
            count: 59,
            registerFormVisible: false,
            registerForm: {
                userName: "",
                password: "",
                currentPassword: "",
                email: "",
                code: ""
            },
            loginForm: {
                /*userName: "test1",
                password: "123456",*/
                userName: "",
                password: "",
                code: ""

            },
            codeUrl: "",

        },
        computed: {
            loginRules() {
                const validateUserName = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请输入用户名'))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('密码不能为空'))
                    } else if(value.length < 6){
                        callback(new Error("密码长度小于6位"))
                    }
                    else {
                        callback()
                    }
                }
                const validateCode = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请输入验证码'))
                    } else {
                        callback()
                    }
                }
                return {
                    'userName': [{
                        'validator': validateUserName,
                        'trigger': 'blur'
                    }],
                    'password': [{
                        'validator': validatePassword,
                        'trigger': 'blur'
                    }],
                    'code': [{
                        'validator': validateCode,
                        'trigger': 'blur'
                    }],
                }
            },
            registerRules() {
                const validateUserName = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请输入用户名'))
                    } else {
                        callback()
                    }
                }
                const validatePassword = (rule, value, callback) => {
                    if (value.trim().length < 6) {
                        callback(new Error('密码不能少于6位'))
                    } else {
                        callback()
                    }
                }
                const validateCurrentPassword = (rule, value, callback) => {
                    if(value.length < 1){
                        callback(new Error("确认密码不能为空"))
                    }
                    if (value != this.registerForm.password) {
                        callback(new Error('两次密码不一致'))
                    } else {
                        callback()
                    }
                }

                return {
                    'userName': [{
                        'validator': validateUserName,
                        'trigger': 'blur'
                    }],
                    'password': [{
                        'validator': validatePassword,
                        'trigger': 'blur'
                    }],
                    'currentPassword': [{
                        'validator': validateCurrentPassword,
                        'trigger': 'blur'
                    }],

                }
            },

        },
        created() {
            this.getCode();
        },
        methods: {
            goBack(){
                history.back();
            },
            registerSendMail(){
                this.$refs.registerForm.validate(async(valid) => {
                    if(valid){
                        var timeout= setInterval(() => {
                            if (this.count < 1) {
                                this.mailDisabled = false;
                                this.btnName = "发送邮箱验证码";
                                this.count = 59;
                                clearInterval(timeout);
                            } else {
                                this.mailDisabled = true;
                                this.btnName = this.count-- + "s后重发";
                            }
                        }, 1000);

                        axios.post("/common/sendCode",this.registerForm).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else {
                                this.$message.success(res.data.data);
                            }
                        })
                    }
                })


            },
            login(){
                this.$refs.loginForm.validate(async (valid) => {
                    if(valid){
                        axios.post("/user/login",this.loginForm).then((res) => {
                            if(res.data.code == 0){
                                this.loginForm.code = "";
                                this.getCode()
                                this.$message.error(res.data.msg)

                            }else{
                                sessionStorage.setItem("userId",res.data.data.userId);
                                this.userInfo = res.data.data;
                                sessionStorage.setItem("headImage",this.userInfo.headImage)
                                this.btnlogin =false;
                                this.btnhead = true;
                                this.$message.success("登录成功");
                                this.loginForm = {
                                    "userName": "",
                                    "password": ""
                                }
                                window.location.href = "./index.html"

                            }
                        })
                    }
                })
            },

            getCode(){
                axios.get("/common/getCode").then((res) => {
                    this.codeUrl = res.data.data;
                })
            },
            register(){
                this.$refs.registerForm.validate(async(valid) => {
                    if(valid){
                        axios.post("/common/verifyCode",this.registerForm).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else {
                                axios.post("/user/register",this.registerForm).then((res) =>{
                                    if(res.data.code == 1){
                                        this.$message.success("注册成功");
                                        this.registerFormVisible = false;
                                        this.registerForm = {
                                            userName: "",
                                            password: "",
                                            currentPassword: "",
                                            email: "",
                                            code: ""
                                        };
                                    }else {
                                        this.$message.error(res.data.msg)
                                    }
                                })
                            }
                        })
                    }
                })
            },
            next() {
                console.log(this.active);
                if(this.active == 0){
                    if(this.changeEmailForm.userName == undefined || this.changeEmailForm.userName == ""){
                        this.$message.error("请输入用户名")
                    }else{
                        axios.get("/user/queryEmail/" + this.changeEmailForm.userName).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else{
                                this.changeEmailForm.email = res.data.data.email
                                this.active++
                            }
                        })
                    }
                }
                if(this.active == 1 ){
                    if(this.changeEmailForm.code == undefined || this.changeEmailForm.code == ""){
                        this.$message.error("请先输入验证码")
                    }else{
                        axios.post("/common/verifyCode",this.changeEmailForm).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else{
                                this.active++
                                this.nextName = "完成"
                            }
                        })
                    }



                }
                if(this.active == 2 ){
                    if(this.changeEmailForm.password == undefined || this.changeEmailForm.password == ""){
                        this.$message.error("请输入密码")
                    }else if(this.changeEmailForm.password.length < 6){
                        this.$message.error("密码不能小于6位")
                    }else if(this.changeEmailForm.currentPassword == undefined || this.changeEmailForm.currentPassword == ""){
                        this.$message.error("请输入确认密码")
                    }else if(this.changeEmailForm.currentPassword != this.changeEmailForm.password){
                        this.$message.error("新密码与确认密码不一致")
                    }
                    else{
                        axios.post("/user/changePassword",this.changeEmailForm).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else{
                                this.changePasswordVisble = false
                                this.active = 0
                                this.changeEmailForm = {
                                    email: "",
                                    userName: "",
                                    code:"",
                                    password:"",
                                    currentPassword:""
                                }
                            }
                        })
                    }



                }

            },
            sendCode2(){
                var timeout= setInterval(() => {
                    if (this.count < 1) {
                        this.newMailDisabled = false;
                        this.newBtnName = "发送邮箱验证码";
                        this.count = 59;
                        clearInterval(timeout);
                    } else {
                        this.newMailDisabled = true;
                        this.newBtnName = this.count-- + "s后重发";
                    }
                }, 1000);

                axios.post("/common/sendCode",this.changeEmailForm).then((res) => {
                    if(res.data.code == 0){
                        this.$message.error(res.data.msg)
                    }else {
                        this.$message.success(res.data.data);
                    }
                })
            }
        }



    })
</script>

</html>